<template>
  <div>
    <a-popover v-model="visible" trigger="click" placement="bottomLeft" overlayClassName="header-notice-wrapper"
      :getPopupContainer="() => $refs.noticeRef.parentElement" :autoAdjustOverflow="true" :arrowPointAtCenter="true"
      :overlayStyle="{ width: '300px', top: '50px' }">
      <template slot="content">
        <a-spin :spinning="loading">
          <a-tabs v-model="queryParam.noticeType" @change="changeType">
            <a-tab-pane v-for="d in typeOptions" :key="d.dictValue" :tab="d.dictLabel">
              <a-list style="max-height: 300px; overflow:auto;">
                <div v-if="showLoadingMore" slot="loadMore"
                  :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }">
                  <a-spin v-if="loadingMore" />
                  <a-button v-else @click="onLoadMore">
                    查看更多
                  </a-button>
                </div>
                <a-list-item v-for="(item, index) in list" :key="index">
                  <a-list-item-meta :description="item.createTime">
                    <a slot="title" @click="$refs.noticeDetail.getNotice(item.noticeId)">
                      <ellipsis :length="32" tooltip>{{ item.noticeTitle }}</ellipsis>
                    </a>
                  </a-list-item-meta>
                </a-list-item>
              </a-list>
            </a-tab-pane>
          </a-tabs>
        </a-spin>
      </template>
      <span @click="fetchNotice" class="header-notice" ref="noticeRef">
        <a-icon style="font-size: 20px;" type="bell" />
        <div class="header-notice-num">{{ list.length ?? 0 }}</div>
      </span>
    </a-popover>
    <notice-detail ref="noticeDetail" :typeOptions="typeOptions" @getList="getList" />
  </div>
</template>

<script>
import { listNotice } from '@/api/system/notice'
import Ellipsis from '@/components/Ellipsis'
import NoticeDetail from './NoticeDetail'

export default {
  name: 'HeaderNotice',
  components: {
    Ellipsis,
    NoticeDetail
  },
  data() {
    return {
      loading: false,
      loadingMore: false,
      showLoadingMore: true,
      visible: false,
      queryParam: {
        pageNum: 1,
        pageSize: 5,
        status: 0,
        noticeType: '1'
      },
      list: [],
      typeOptions: [],
      // 定时器ID
      timerId: null
    }
  },
  created() {
    this.startFetchingList(); // 组件创建时开始获取列表
  },
  beforeDestroy() {
    this.stopFetchingList(); // 组件销毁前停止获取列表
  },
  methods: {
    getList() {
      // this.loading = true
      listNotice(this.queryParam).then(response => {
        this.list = response.rows
        this.total = response.total
        if (this.total <= this.queryParam.pageNum * this.queryParam.pageSize) {
          this.showLoadingMore = false
        } else {
          this.showLoadingMore = true
        }
        // 在请求成功 后 在设置新的
        // this.startFetchingList();
        // this.loading = false
      }
      ).catch(()=>{
        // 请求失败关闭定时器
        this.stopFetchingList(); 
      })
      // .finally(() => {
      //   // 在请求完成（无论是成功还是失败）后设置新的定时器
      //   this.startFetchingList();
      // });
    },
    fetchNotice() {
      this.resetQuery()
      if (!this.visible) {
        if (this.typeOptions.length === 0) {
          this.getDicts('sys_notice_type').then(response => {
            this.typeOptions = response.data
          })
        }
        this.getList()
      }
      this.visible = !this.visible
    },
    resetQuery() {
      this.queryParam = {
        pageNum: 1,
        pageSize: 5,
        status: 0,
        noticeType: '1'
      }
      // this.list = []
    },
    changeType(key) {
      this.resetQuery()
      this.queryParam.noticeType = key
      this.getList()
    },
    onLoadMore() {
      this.loadingMore = true
      this.queryParam.pageNum++
      this.getList()
      this.loadingMore = false
    },
    startFetchingList() {
      // 清除之前可能存在的定时器
      if (this.timerId) {
        clearTimeout(this.timerId);
      }
      // 设置新的定时器，5秒后执行getList方法
      this.timerId = setTimeout(this.getList, 1000);
    },
    stopFetchingList() {
      // 清除定时器
      if (this.timerId) {
        clearTimeout(this.timerId);
        this.timerId = null;
      }
    }
  }
}
</script>
<style lang="less" scoped>
.header-notice-wrapper {
  top: 50px !important;
}

.header-notice {
  display: inline-block;
  transition: all 0.3s;
  position: relative;

  span {
    vertical-align: initial;
  }

  .header-notice-num {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: red;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 15px;
    right: -6px;
    color: white;
  }
}
</style>
